<template>
  <div
    class="answer-analysis"
    v-drag:name="'header'"
    @mousedown="showDragBox"
    @mouseup="hideDragBox"
    :style="{'min-height':isShowAnalysis?'400px':'300px'}"
  >
    <div class="drag-box" v-show="isShowDragBox" :style="{height:isShowAnalysis?'460px':'300px'}"></div>
    <div class="header" style>
      问题反馈
      <span
        class="close"
        @click="closeThisDialog"
        style="font-size:26px;float:right;margin-right:18px; cursor:pointer;width:30px;height:30px;text-align:center;"
      >×</span>
    </div>
    <!-- <div class="content" v-if="isShowAnalysis">
      <div class="rightAnswer" style="">
        <div class="title" style="" v-if="isShowAnswer">
          正确答案：
          <span>{{answer}}</span>
        </div>
        <div class="title" style="" v-if="!isShowAnswer">
          解析：
        </div>
        <div class="analysis" style="max-height:100px;overflow:auto" v-html="analysisContent"></div>
      </div>
    </div>-->
    <div class="feedback" style="padding-top:10px;">
      <div class="title" style>问题反馈</div>
      <div class="fbType" style="padding-left:10px;">
        反馈类型：
        <label style="cursor:pointer;padding-left:6px;">
          <input type="radio" name="type" checked @click="getfbType(1)" />错别字
        </label>
        <label style="cursor:pointer;padding-left:6px;">
          <input type="radio" name="type" @click="getfbType(2)" />答案不匹配
        </label>
        <label style="cursor:pointer;padding-left:6px;">
          <input type="radio" name="type" @click="getfbType(3)" />答案错误
        </label>
        <label style="cursor:pointer;padding-left:6px;">
          <input type="radio" name="type" @click="getfbType(4)" />其他
        </label>
      </div>
      <div class="content" style="display:flex;padding:20px 0 0 16px;">
        <img
          src="../static/images/touxiang.jpg"
          style="width:70px;height:70px;border-radius:35px;"
          v-if="!imagePath"
        />
        <img
          :src="imagePath"
          alt
          style="width:70px;height:70px;border-radius:35px;"
          v-if="imagePath"
        />
        <div class="input-area" style>
          <div class="tip">
            <div>
              还能输入
              <strong
                style="font-size:20px;font-family: georgia;"
              >{{txtVal = 250-fbContent.length}}</strong>字
            </div>
            <div class="txt-box">
              <!-- <textarea class="txt" name id cols="30" rows="10" style v-model="fbContent"></textarea> -->
              <el-input type="textarea" rows="5" v-model="fbContent" maxlength="250" resize="none"></el-input>
            </div>
            <div class="bottom">
              <div class="qrcode">
                <input type="text" placeholder="验证码" v-model="qrcodeNum" />
                <img
                  style="width:150px;height:44px;cursor:pointer;"
                  :src="qrcodeUrl"
                  title="点击切换"
                  alt="点击切换"
                  @click="getQRCode"
                />
              </div>
              <div class="submit" @click="submitFB">提交</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@keyframes myfirst {
  //放大
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
.answer-analysis {
  min-height: 300px;
  animation: myfirst 0.3s;
  .drag-box {
    width: 800px;
    background: #eee;
    opacity: 0.4;
    border: 5px solid rgba(14, 12, 12, 0.863);
    position: fixed;
    z-index: 1;
  }
  width: 800px;
  position: fixed;
  top: 228px;
  left: 30%;
  right: 0;
  background-color: #fff;
  z-index: 100;
  .feedback {
    padding: 6px 30px 20px 30px;
    .content {
      .input-area {
        .bottom {
          padding-top: 5px;
          display: flex;
          justify-content: space-between;
          input {
            width: 100px;
            height: 37px;
            padding: 0 3px;
          }
        }
        .tip {
          padding-left: 16px;
          .txt-box {
            // border: 1px solid #ddd;
            border-radius: 3px;
            width: 550px;
          }
          .txt {
            height: 120px;
            resize: none;
            height: 120px;
            width: 100%;
            border: none;
            padding: 5px;
            opacity: 0.9;
          }
        }
        .submit {
          background-color: #0e90d2;
          width: 66px;
          height: 37px;
          color: white;
          text-align: center;
          border-radius: 20px;
          line-height: 37px;
          cursor: pointer;
        }
      }
    }
    .title {
      font-size: 18px;
      margin: -8px 0px 0px 0px;
    }
  }
  .content {
    .rightAnswer {
      padding: 20px 30px 8px 30px;
      border-bottom: 1px solid #eee;
      .title {
        font-weight: 500;
        font-size: 18px;
        padding-bottom: 8px;
      }
      .analysis {
        border-left: 4px solid #ddd;
        font-family: Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi,
          BiauKai, FontAwesome, serif;
      }
    }
  }
  .header {
    cursor: move;
    background: #4476a7;
    color: #fff;
    border: none;
    padding: 0 0px 0 20px;
    height: 42px;
    line-height: 42px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px 2px 0 0;
  }
}
</style>
<script>
import { STATIC_ADDRESS, BASE_URL } from "@/utils/http.js";
export default {
  props: ["isShowAnalysis", "curQuestion", "isShowAnswer", "idx"],
  data() {
    return {
      analysisDialogVisible: true,
      show: true,
      isShowDragBox: false,
      answer: "",
      analysisContent: "",
      qrcodeUrl: "",
      fbtype: 1,
      fbContent: "",
      qrcodeNum: "",
      imagePath: "",
      txtVal: 0
    };
  },

  created() {
    this.imagePath = STATIC_ADDRESS + "/" + localStorage.getItem("imagePath");
    this.getQRCode(); //初始验证码

    if (this.curQuestion.type == 2 || this.curQuestion.type == 6) {
      this.analysisContent = this.curQuestion.children[0].analysis;
    } else if (this.curQuestion) {
      this.analysisContent = this.curQuestion.analysis;

      if (this.curQuestion.type == 1 || this.curQuestion.type == 0) {
        this.curQuestion.options.forEach(option => {
          if (option.isCorrect) {
            this.answer += option.optionName;
          }
        });
      }
    }
  },
  methods: {
    getfbType(type) {
      this.fbtype = type;
    },
    getQRCode() {
      this.$get("/verification_code").then(res => {
        this.qrcodeUrl = "data:image/jpg;base64," + res.data;
      });
    },
    submitFB() {
      //提交反馈
      let uuId = localStorage.getItem("uid");

      this.$post("/api/v1/question_corrections", {
        code: this.qrcodeNum,
        content: this.fbContent,
        // questionId: this.curQuestion.id,
        questionId: this.curQuestion.questionId,
        type: this.fbtype,
        uuId
      }).then(res => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        } else {
          this.$message({
            message: "反馈成功",
            type: "success"
          });
          this.fbContent = "";
          this.qrcodeNum = "";
        }
      });
    },
    hideDragBox() {
      this.isShowDragBox = false;
    },
    showDragBox(e) {
      if (e.target.className != "header") {
        return;
      }
      this.isShowDragBox = true;
    },
    closeThisDialog() {
      this.$emit("close");
    }
  },
  /*实现拖拽*/
  directives: {
    drag: {
      bind: function(el, binding) {
        el.onmousedown = function(e) {
          let moveEl = el.childNodes[0];
          if (e.target.className != binding.value) {
            return;
          }
          let disx = e.clientX - moveEl.offsetLeft;
          let disy = e.clientY - moveEl.offsetTop;
          document.onmousemove = function(e) {
            var x = e.clientX - disx;
            var y = e.clientY - disy;
            moveEl.style.left = x + "px";
            moveEl.style.top = y + "px";
          };
          document.onmouseup = function() {
            el.style.left = moveEl.style.left;
            el.style.top = moveEl.style.top;
            this.isShowDragBox = false;
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
};
</script>


